<template>
  <view class="square" >

    <view v-if="loadingDiaryList"  style="margin-top: 24px;" >
      <nut-skeleton width="250px" height="15px" title animated avatar avatarSize="60px" row="24" > </nut-skeleton>
    </view>
    
    <view class="diary-list" v-else >
      <view class="diary-item" v-for="item in diaryList" :key="item.id" >
        <diaryCardCom :diary="item" pure />
      </view>
    </view>

    <no-more v-if="final" />
  </view>
</template>
<script lang='ts'  setup >
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { DiaryController } from '@/controller'

  const queryParams = ref({
    time: '',
    isDay: true,
    page: 1,
    tgcr: true,
    ganZhi: '乙巳',
    rizhu: '日主',
    total: 0
  })


  const loadingDiaryList  = ref(false)

  const final = ref(false)

  const diaryList = ref<API.DIARY[]>([])

  const getDiaryPage = async () => {
    if (queryParams.value.page == 1 )  loadingDiaryList.value = true

    const data = await DiaryController.getDiaryPage(queryParams.value)
    loadingDiaryList.value = false
    queryParams.value.total = data.total
    if (diaryList.value.length < queryParams.value.total) {
      diaryList.value.push(...data.records)
    }
    if (diaryList.value.length === queryParams.value.total) {
      final.value = true
    }
  }

  onLoad((options: any) => {
    const time = options.time || ''
    queryParams.value.time = time
    getDiaryPage()
  })
</script>
<style lang='scss' scoped >
 @import '../../styles/index.scss';

.square {
 padding: 0 48rpx;
 padding-top: 48rpx;
 padding-bottom: 160rpx;
 background-color: $page-color;
 box-sizing: border-box;
 min-height: 100vh;
 .search {
   display: flex;
   color: $text-grey;
   .line {
     margin: 0 24rpx;
   }
   .active {
     color: $main-color;
   }
 }
 .diary-list {
   margin-top: 24rpx;
   .diary-item {
     margin-bottom: 24rpx;
   }
 }
}
</style>